// 1.下包并引入路由
import VueRouter from "vue-router";
import Vue from "vue";

const Home = () => import("@/pages/Home");
const Login = () => import("@/pages/Login");
const News = () => import("@/pages/Home/News");
const Music = () => import("@/pages/Home/Music");
const Game = () => import("@/pages/Home/Game");
const NotFound = () => import("@/pages/NotFound/404");
const MusicDetail = () => import("@/pages/Home/Music/MusicDetail");
// 2.应用路由插件（比如注册一些router提供的全局组件等等...）
Vue.use(VueRouter)

// 3.创建路由器对象，并在内部配置模式和路由表
const router=new VueRouter({
    mode:"history",
    routes:[
        {path:"/",redirect:"/Home"},
        // 每一个对象都是一个路由规则，我们可以给路由规则一个名字，方便后边使用
        {path:"/Home",component:Home,
        // 如果某个路由拥有了默认子路由，我们一般不会在这个路由规则上命名
        // 二级路由配置
    children:[
        // 二级路由的路径可以直接书写二级路由的路由名称即可，不用书写完整的地址
        // 但是不能写/+当前路由地址
        {path:"News",component:News,name:"News"},
        {path:"Music",component:Music,name:"Music",
    children:[
        // params参数可以设置可选
        {path:"MusicDetail/:id/:age?",component:MusicDetail,name:"MusicDetail"}
    ]},
    {path:"Game",component:Game,name:"Game"},
    // 默认子路由写法1：重定向推荐写法
    {path:"",redirect:"News"},
    // 默认子路由写法2：直接定向设置组件写法
    {path:"",component:News}
    ]},

    // 404配置写到最下边
    {path:"/Login",component:Login,name:"Login"},
    {path:"",component:NotFound},
    ]
})

// 4.暴露router，注入到vue实例中
export default router